@(title:String, project:String, params:Map[String, String], page:Option[String] = Some("dashboard"), sys_info:Option[String]=None)(implicit request:RequestHeader)

@default(title, project, params, page){
  <!-- stylesheet -->

  <script type="text/javascript">
    window.mathjax_url = this.location.protocol + "//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js";
  </script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_HTML-full&delayStartupUntil=configured" charset="utf-8"></script>

  <link rel="stylesheet" href="@routes.Assets.at("stylesheets/third/bootstrap/css/bootstrap.css")" type="text/css" />
  <link rel="stylesheet" href="@routes.Assets.at("ipython/components/bootstrap-tour/build/css/bootstrap-tour.min.css")" type="text/css" />
  <link rel="stylesheet" href="@routes.Assets.at("ipython/components/codemirror/lib/codemirror.css")">
  <link rel="stylesheet" href="@routes.Assets.at("ipython/style/style.min.css")" type="text/css"/>
  <link rel="stylesheet" href="@routes.Assets.at("ipython/notebook/css/override.css")" type="text/css" />
  <link rel="stylesheet" href=""  id='kernel-css'                             type="text/css" />
  <link rel="stylesheet" href="@routes.Assets.at("stylesheets/third/leaflet.css")" type="text/css" />
  <link rel="stylesheet" href="@routes.Assets.at("stylesheets/third/L.Control.MousePosition.css")" type="text/css" />
  <!-- tweaks for report mode, if it is active -->
    @if(params.get("presentation") == Some("report")) {
        <link rel="stylesheet" href="@routes.Assets.at("stylesheets/ipython/css/reportmode_notebook.css")" type="text/css" />
    }
  <!-- must come below ipython/style/style.min.css -->
  <link rel="stylesheet" href="@routes.Assets.at("javascripts/third/bootstrap/css/bootstrap-submenu.css")" type="text/css" />
  <link rel="stylesheet" href="@routes.Assets.at("stylesheets/user_custom.css")" type="text/css" />
}{
  <!-- meta -->

}{
  <!-- headercontainer -->
  <span id="save_widget" class="pull-left save_widget">
      <span id="notebook_name" class="filename"></span>
      <span class="checkpoint_status"></span>
      <span class="autosave_status"></span>
  </span>

  <span id="kernel_logo_widget">
    <img class="current_kernel_logo" src=""/>
  </span>
}{

<div id="menubar-container" class="container">
<div id="menubar">
    <div id="menus" class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <button type="button" class="btn btn-default navbar-btn navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <i class="fa fa-bars"></i>
              <span class="navbar-text">Menu</span>
            </button>
            <p id="kernel_indicator" class="navbar-text">
              <span class="kernel_indicator_name">Kernel</span>
              <i id="kernel_indicator_icon"></i>
            </p>
            <i id="modal_indicator" class="navbar-text"></i>
            <span id="notification_area"></span>
            <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">File</a>
                    <ul id="file_menu" class="dropdown-menu">
                        <li id="new_notebook" class="dropdown-submenu">
                            <a href="#">New Notebook</a>
                            <ul class="dropdown-menu" id="menu-new-notebook-submenu"></ul>
                        </li>
                        <li id="open_notebook"
                            title="Opens a new window with the Dashboard view">
                            <a href="#">Open...</a></li>
                        <!-- <hr/> -->
                        <li class="divider"></li>
                        <li id="copy_notebook"
                            title="Open a copy of this notebook's contents and start a new kernel">
                            <a href="#">Make a Copy...</a></li>
                        <li id="rename_notebook"><a href="#">Rename/move...</a></li>

                        <li class="divider"></li>
                        <li id="save_notebook"><a href="#">Save</a></li>
                        @if(_root_.utils.AppUtils.isVersioningSupported){
                          <li id="save_checkpoint"><a href="#">Save (with commit message)</a></li>
                          <li id="restore_checkpoint" class="dropdown-submenu"><a href="#">Revert to Checkpoint</a>
                            <ul class="dropdown-menu">
                              <li><a href="#"></a></li>
                              <li><a href="#"></a></li>
                              <li><a href="#"></a></li>
                              <li><a href="#"></a></li>
                              <li><a href="#"></a></li>
                            </ul>
                          </li>
                        }
                        <li class="divider"></li>

                        <!-- <li id="print_preview"><a href="#">Print Preview</a></li> -->
                        <li class="dropdown-submenu"><a href="#">Download as</a>
                            <ul class="dropdown-menu">
                                <li id="download_snb"><a href="#">Spark Notebook (.snb.ipynb)</a></li>
                                <li id="download_scala"><a href="#">Scala</a></li>
                                <!-- <li id="download_html"><a href="#">HTML (.html)</a></li>
                                <li id="download_rst"><a href="#">reST (.rst)</a></li> -->
                                <li id="download_markdown"><a href="#">Markdown (.md)</a></li>
                                <li id="download_pdf"><a href="#">PDF (.pdf)</a></li>
                            </ul>
                        </li>
                        <li class="divider"></li>
                        <!--
                        <li id="trust_notebook"
                            title="Trust the output of this notebook">
                            <a href="#" >Trust Notebook</a></li>
                        <li class="divider"></li>
                        -->
                        <li id="kill_and_exit"
                            title="Shutdown this notebook's kernel, and close this window">
                            <a href="#" >Close and halt</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit</a>
                    <ul id="edit_menu" class="dropdown-menu">
                        <li id="cut_cell"><a href="#">Cut Cell</a></li>
                        <li id="copy_cell"><a href="#">Copy Cell</a></li>
                        <li id="paste_cell_above" class="disabled"><a href="#">Paste Cell Above</a></li>
                        <li id="paste_cell_below" class="disabled"><a href="#">Paste Cell Below</a></li>
                        <li id="paste_cell_replace" class="disabled"><a href="#">Paste Cell &amp; Replace</a></li>
                        <li id="delete_cell"><a href="#">Delete Cell</a></li>
                        <li id="undelete_cell" class="disabled"><a href="#">Undo Delete Cell</a></li>
                        <li class="divider"></li>
                        <li id="split_cell"><a href="#">Split Cell</a></li>
                        <li id="merge_cell_above"><a href="#">Merge Cell Above</a></li>
                        <li id="merge_cell_below"><a href="#">Merge Cell Below</a></li>
                        <li class="divider"></li>
                        <li id="move_cell_up"><a href="#">Move Cell Up</a></li>
                        <li id="move_cell_down"><a href="#">Move Cell Down</a></li>
                        <li class="divider"></li>
                        <li id="edit_nb_metadata"><a href="#">Edit Notebook Metadata</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">View</a>
                    <ul id="view_menu" class="dropdown-menu">
                        <li id="toggle-sidebar-menu-item">
                            <a href="#" id="toggle-sidebar">Toggle sidebar (error logs, status, etc)</a>
                        </li>
                        <li id="link-to-spark-ui" class="disabled">
                            <a href="#" target="_blank">Open Spark UI</a>
                        </li>
                        <li class="divider"></li>
                        <li id="read_only_view">
                            <a href="?read_only=1" target="_blank">
                                Read-only (save resources, no autosave conflicts)
                            </a>
                        </li>
                        <li id="report_view">
                            <a href="?presentation=report&amp;read_only=1" target="_blank">Results only report (read only)</a>
                        </li>
                        <li id="report_view_auto_refresh">
                            <a href="?presentation=report&amp;recompute_now=true" target="_blank">
                                Self-updating Report (results only; recompute on load)
                            </a>
                        </li>
                        <!--
                        <li class="divider"></li>
                        <li id="toggle_header"
                            title="Show/Hide the IPython Notebook logo and notebook title (above menu bar)">
                            <a href="#">Toggle Header</a></li>
                        <li id="toggle_toolbar"
                            title="Show/Hide the action icons (below menu bar)">
                            <a href="#">Toggle Toolbar</a></li>
                         -->
                    </ul>
                </li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Insert</a>
                    <ul id="insert_menu" class="dropdown-menu">
                        <li id="insert_cell_above"
                            title="Insert an empty Code cell above the currently active cell">
                            <a href="#">Insert Cell Above</a></li>
                        <li id="insert_cell_below"
                            title="Insert an empty Code cell below the currently active cell">
                            <a href="#">Insert Cell Below</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Cell</a>
                    <ul id="cell_menu" class="dropdown-menu">
                        <li id="run_cell" title="Run this cell, and move cursor to the next one">
                            <a href="#">Run</a></li>
                        <li id="run_cell_select_below" title="Run this cell, select below">
                            <a href="#">Run and Select Below</a></li>
                        <li id="run_cell_insert_below" title="Run this cell, insert below">
                            <a href="#">Run and Insert Below</a></li>
                        <li id="run_all_cells" title="Run all cells in the notebook">
                            <a href="#">Run All</a></li>
                        <li id="run_all_cells_above" title="Run all cells above (but not including) this cell">
                            <a href="#">Run All Above</a></li>
                        <li id="run_all_cells_below" title="Run this cell and all cells below it">
                            <a href="#">Run All Below</a></li>
                        <li class="divider"></li>
                        <li id="all_inputs" class="dropdown-submenu"><a href="#">All Input</a>
                            <ul class="dropdown-menu">
                                <li id="toggle_all_input"
                                    title="Hide/Show the input of all cells">
                                    <a href="#">Toggle</a>
                                </li>
                            </ul>
                        </li>
                        <li class="divider"></li>
                        <li id="current_output_streams" class="dropdown-submenu"><a href="#">Output Streams</a>
                            <ul class="dropdown-menu">
                                <li id="toggle_current_output_stream"
                                    title="Hide/Show the output stream of the current cell">
                                    <a href="#">Toggle</a>
                                </li>
                                <li id="toggle_all_output_stream"
                                    title="Hide/Show the output stream of all cells">
                                    <a href="#">Toggle All</a>
                                </li>
                            </ul>
                        </li>
                        <li id="all_outputs" class="dropdown-submenu"><a href="#">All Output</a>
                            <ul class="dropdown-menu">
                                <li id="toggle_all_output"
                                    title="Hide/Show the output of all cells">
                                    <a href="#">Toggle</a>
                                </li>
                                <li id="toggle_all_output_scroll"
                                    title="Scroll the output of all cells">
                                    <a href="#">Toggle Scrolling</a>
                                </li>
                                <li id="clear_all_output"
                                    title="Clear the output of all cells">
                                    <a href="#">Clear</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Kernel</a>
                    <ul id="kernel_menu" class="dropdown-menu">
                        <li id="int_kernel"
                            title="Stop the Kernel">
                            <a href="#">Stop</a>
                        </li>
                        <li id="restart_kernel"
                            title="Restart the Kernel">
                            <a href="#">Restart</a>
                        </li>
                        <!---
                        <li id="reconnect_kernel"
                            title="Reconnect to the Kernel">
                            <a href="#">Reconnect</a>
                        </li>
                        -->
                        <li class="divider"></li>
                        <li id="menu-change-kernel" class="dropdown-submenu">
                            <a href="#">Change kernel</a>
                            <ul class="dropdown-menu" id="menu-change-kernel-submenu"></ul>
                        </li>
                    </ul>
                </li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Help</a>
                    <ul  id="help_menu" class="dropdown-menu">
                        <li id="notebook_tour" title="A quick tour of the notebook user interface"><a href="#">User Interface Tour</a></li>
                        <li id="keyboard_shortcuts" title="Opens a tooltip with all keyboard shortcuts"><a href="#">Keyboard Shortcuts</a></li>
                        <li class="divider"></li>
                        <li id="notebook_docs" title="documentation"><a href="/assets/docs/index.html" target="_blank">Docs</a></li>
                        <!--{% set
                            sections = (
                                (
                                    ("http://nbviewer.ipython.org/github/ipython/ipython/blob/3.x/examples/Notebook/Index.ipynb", "Notebook Help", True),
                                    ("https://help.github.com/articles/markdown-basics/","Markdown",True),
                                ),
                            )
                        %}-->

                        <!-- {% for helplinks in sections %}
                            {% for link in helplinks %}
                                <li><a href="{{link[0]}}" {{'target="_blank" title="Opens in a new window"' if link[2]}}>
                                {{'<i class="fa fa-external-link menu-icon pull-right"></i>' if link[2]}}
                                {{link[1]}}
                                </a></li>
                            {% endfor %}
                            {% if not loop.last %}
                                <li class="divider"></li>
                            {% endif %}
                        {% endfor %} -->
                        <li class="divider"></li>
                        <li title="About Spark Notebook"><a id="notebook_about" href="#">About</a></li>
                    </ul>
                </li>
              </ul>
            </div>
        </div>
    </div>
</div>

<div id="maintoolbar" class="navbar">
  <div class="toolbar-inner navbar-inner navbar-nobg">
    <div id="maintoolbar-container" class="container"></div>
  </div>
</div>
</div>

<div class="lower-header-bar"></div>
} {
  <div id="ipython-main-app">
      <div id="notebook_panel" class="container-fluid">
          <div id="notebook" class="col-md-9"></div>

          <div id="notebook-panels" class="col-md-3">
            <div id="sidebar" class="dont-use-gridster">
                <ul class="nav nav-tabs" style="padding-top: 5px">
                    <li class="active"><a data-toggle="tab" href="#defined-terms">Vars <span id="defined-terms-count" class="badge"></span></a></li>
                    <li><a data-toggle="tab" href="#error-logs">Errors <span id="errors-count" class="badge"></span></a></li>
                    @if(_root_.utils.AppUtils.isVersioningSupported) {
                      <li><a data-toggle="tab" href="#browse-checkpoints">Edit history</a></li>
                    }
                </ul>

                <div class="tab-content">
                    <!--
                        <h4 id="spark-jobs">Spark Job Progress</h4>
                        <div id="all-jobs-progress-bar"></div>
                    -->

                    <div id="defined-terms" class="tab-pane fade in active">
                        <h4>Terms defined</h4>
                        <div id="termDefinitions" style="overflow: auto"></div>
                    </div>

                    <div id="error-logs" class="tab-pane fade">
                        <h4>Error logs</h4>
                        * see browser console for more logs

                        <ul id="logsPanel" style="overflow: auto;"></ul>
                    </div>

                    @if(_root_.utils.AppUtils.isVersioningSupported) {
                      <div id="browse-checkpoints" class="tab-pane fade">
                      @notebookviews.browseCheckpoints()
                      </div>
                    }

                        <div id="chat-room" style="visibility: hidden; display: none">
                            <h4>Chat Room</h4>
                            <input type="text" name="alias" class="form-control" data-bind="value: chat.alias, hasFocus: chat.aliasing" placeholder="Choose an alias"/>
                            <div class="room">
                                <ul class="chat" style="list-style:none; overflow: auto; height: 130px;" data-bind="foreach: chat.messages">
                                    <li class="message"><strong><span data-bind="text: alias"></span>: </strong> <span data-bind="text: content, title: time"></span></li>
                                </ul>
                                <input type="text" name="message" class="form-control" placeholder="Type your message..." data-bind="enable: chat.joined, value: chat.new_message, hasFocus: chat.chatting"/>
                            </div>
                        </div>
                </div>

            </div>
          </div>
      </div>
  </div>

  <div id="pager">
      <div id="pager-contents">
          <div id="pager-container" class="container"></div>
      </div>
      <div id='pager-button-area'></div>
  </div>

  <div id='tooltip' class='ipython_tooltip' style='display:none'></div>
} {
  <!-- script -->
  <script type="text/javascript">
      sys_info = "@{sys_info.getOrElse("missing: sys_info")}";
  </script>
  <script src="@routes.Assets.at("ipython/components/text-encoding/lib/encoding.js")" charset="utf-8"></script>
  <!-- main app -->
  <script src="@routes.Assets.at("ipython/notebook/js/main.js")" charset="utf-8"></script>
}
